<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .list{background: #ccc;padding: 20px;list-style: none;}
    .list li{margin: 10px 0;background: red;padding: 5px 0;}
  </style>
</head>
<body>
  <ul class="list">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
  </ul>
</body>
<script>

  // var li = document.querySelectorAll(".list li");
  // for(var i=0;i<li.length;i++){
  //   li[i].onclick = function(){
  //     console.log(this);
  //   }
  // }

  // 事件委托：将多个子元素的相同事件，添加给页面上现存的共同的父元素。利用事件冒泡的原理，配合事件目标找到真正要触发事件的元素 的过程

  // 优势：节省性能，可以给页面上暂时不存在的元素添加事件

  var ul = document.querySelector(".list");
  ul.onclick = function(eve){
    var e = eve || window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName === "LI"){
      console.log(target)
    }
  }

</script>
</html>